<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./me.css">
		<link rel="stylesheet" href="./index.css">
		<script src="./vue.js"></script>
		<script src="./ele.js"></script>
		<script src="./el.js"></script>
	</head>

	<body>
		<div id="app">
			<div class="treebox">
				<box-tree :pagec='pagec' :ld='ld' :treeitem='treeitem' :editl='editl' :proplist="list"></box-tree>
			</div>
			<el-dialog title="列表" :visible.sync="dialogVisible">
				<el-table v-loading='lvLoading' :data="tableData" stripe border height="300" style="width: 100%">
					<el-table-column prop="id" label="编号"></el-table-column>
					<el-table-column prop="t" label="人数"></el-table-column>
				</el-table>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
				</span>
			</el-dialog>
		</div>
	</body>
	<script type="text/javascript">
		var a = 30
		var Vue = new Vue({
			el: '#app',
			data() {
				return {
					// 弹出
					dialogVisible: false,
					//弹出数据
					tableData: [],
					lvLoading: false,
					ld: false,
					// 表格编辑数据
					editl: [{

						icon: 'el-icon-view',
						name: '查看',
						click(item) {
							console.log(item)
							Vue.dialogVisible = true
							// Vue.lvLoading = true
							Vue.tableData = item.list || []
							// postData(url, {
							// 	id: item.id,
							// 	type: 2
							// }).then(res => {
							// 	console.log(res)
							// 	Vue.lvLoading = false
							// 	Vue.tableData = res.data.list
							// }).catch(()=>{
							// 	Vue.lvLoading = false
							// })
						},

					}],
					list: {
						// 递归组件的key
						rowKey:'id',
						labelw: [{
								label: '编号',
								prop: 'id'
							},
							{
								label: '人数',
								prop: 't'
							}
						],
						col: {
							"top": 1, //是否为顶层
							"list": [{
								"total": "20", 
								"page": 1,
								"id": "1",
								"t": "0",
								"list": [{
										"id": "11",
										"t": "0",
									},
									{
										"id": "12",
										"t": "0",
									},
									{
										"id": "13",
										"t": "0",
									},
									{
										"id": "14",
										"t": "0",
									},
									{
										"id": "15",
										"t": "0",
									},

								]
							}]
						}
					}
				}
			},
			mounted() {
				// this.$nextTick(()=>{
				// 	this.init()
				// })
			},
			methods: {
				init() {
					postData(url, {
						type: 1
					}).then(res => {
						console.log(res)
						this.list.col = {
							top: 1,
							list: [{
								total: res.data.total,
								page: res.data.page,
								...res.data.curUser,
								list: res.data.list,
							}]
						}
					})

				},
				// 分页
				pagec({
					p,
					list,
					ps
				}) {
					this.ld = true
					// 获取对应页的数据
					postData(url, {
						id: list.id,
						type: 1,
						page: p,
						pageSize: ps || 10
					}).then(res => {
						this.ld = false
						this.$set(list, 'list', res.data.list)
					}).catch(() => {
						this.ld = false
					})
				},
				treeitem(list) {
					if (list.item.customers == '0') return
					if (list.open[list.index]) {
						this.$set(list.open, list.index, false)
						return
					}

					if (list.list.top) {
						this.$set(list.loads, 'type', false)
						this.$set(list.open, list.index, true)
						return
					}
					this.$set(list.loads, 'index', list.index)
					this.$set(list.loads, 'type', true)

					var pData = {
						type: 1,
						id: list.item.id
					}
					// 获取数据
					postData(url, pData).then(res => {
						this.$set(list.loads, 'type', false)
						this.$set(list.open, list.index, true)
						this.$set(list.item, 'list', res.data.list)
						this.$set(list.item, 'total', res.data.total)
						this.$set(list.item, 'page', res.data.page)
					})
				},
			},
		})
	</script>

</html>
